<template>
  <!-- content部分 -->
  <div class="content">
    <!-- contentLeft部分 -->
    <div class="contentLeft">
      <el-menu :default-active="flag" style="border: 0; height: 610px">
        <el-menu-item index="1" @click="$store.commit('UPDATENAV', '1')">
          <el-icon>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-grouping"></use>
            </svg>
          </el-icon>
          <span>分类管理</span>
        </el-menu-item>
        <el-menu-item index="2" @click="$store.commit('UPDATENAV', '2')">
          <el-icon>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shujixinxi"></use>
            </svg>
          </el-icon>
          <span>图书管理</span>
        </el-menu-item>
        <el-menu-item index="3" @click="$store.commit('UPDATENAV', '3')">
          <el-icon>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xueshengguanli"></use>
            </svg>
          </el-icon>
          <span>用户管理</span>
        </el-menu-item>
        <el-sub-menu index="1">
          <template #title>
            <el-icon
              ><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shujiguanli"></use></svg
            ></el-icon>
            <span>借阅管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="4" @click="$store.commit('UPDATENAV', '4')">
              <el-icon
                ><svg class="icon" aria-hidden="true" style="fill: #ccc">
                  <use xlink:href="#icon-manage-the-return-of-books"></use></svg
              ></el-icon>
              借阅与归还</el-menu-item
            >
            <el-menu-item index="6" @click="$store.commit('UPDATENAV', '6')">
              <el-icon
                ><svg class="icon" aria-hidden="true" style="fill: #ccc">
                  <use xlink:href="#icon-jilu"></use></svg
              ></el-icon>
              借阅记录</el-menu-item
            >
          </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item index="5" @click="$store.commit('UPDATENAV', '5')">
          <el-icon>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-lianjie"></use>
            </svg>
          </el-icon>
          <span>友情链接</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- contentRight部分 -->
    <div class="contentRight">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { onMounted, computed, watch } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default {
  setup(props) {
    let { state, commit } = useStore();
    let flag = computed(() => state.flag);
    let { push } = useRouter();

    //监测flag变化
    watch(flag, (newval, oldval) => {
      if (newval == "1") {
        push("/categoryRe");
      } else if (newval == "2") {
        push("/booksRe");
      } else if (newval == "3") {
        push("/userRe");
      } else if (newval == "4") {
        push("/lendAndReturn");
      } else if (newval == "5") {
        push("/link");
      } else {
        push("/bookRecord");
      }
    });

    onMounted(() => {
      commit("UPDATENAV", "1");
      push("/categoryRe");
    });

    return {
      flag,
    };
  },
};
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: space-between;
  .contentLeft {
    flex: 1;
    height: 100%;
  }
  .contentRight {
    flex: 5;
  }
}
</style>

